/**
 * Created by xxx on 2017/5/15.
 */
//用react封装
var currentpage = 1,totlepage = 1,i,addressAll = localStorage.address,reserveDeviceType=localStorage.reserveDeviceType;//分页的当前页和总的页数
var addressValue = "";
if(addressAll != null && addressAll != undefined && addressAll != ""){
    addressValue = addressAll.replace(/-/g,"");
}
//表单的最高高度、当前第几页、总页数、总行数、设备投放切换、箱号
var otherData = {currentpage:1,totlepage:1,totlerows:1,pageLeft:0,pageRight:0,batchNumber:'',upBatchNumber:''},tableData = [],schoolDataAll = [],schoolDataList = [],importRepeatData = [];
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <ol className="page-limit-ol">
                            <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                            {
                                items.map(function (item) {
                                    return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)} className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                                })
                            }
                            <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)} ><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                        </ol>
                    </ol>
                </div>
            </div>
        );
    },
});
//表单组件
var Table = React.createClass({
    clickChecked: function () {
        var childsCheckBox = $(".reservDetail-tbody").children();
        var b = 0,a = 0;
        for(var i = 0;i<childsCheckBox.length;i++){
            var child = $($(childsCheckBox[i]).children()[0]).children();
            if($(child[0]).length == 0){
                a ++;
            }
            if($(child[0]).is(':checked')){
                b ++;
            }
        };
        if(b == childsCheckBox.length-a){
            $(".onlineCheckBox").prop('checked',true);
        }else{
            $('.onlineCheckBox').attr('checked',false);
        }
    },
    render: function () {
        return (
            <tr>
                <td style={{width: '10%'}}>{this.props.schoolname == null?<input onClick={this.clickChecked} className="onlineChildCheckBox" data-value={this.props.id} type="checkbox"/>:""}</td>
                <td style={{width: '10%'}}>{parseInt(this.props.listNumber)+1}</td>
                <td style={{width: '15%'}}>{this.props.devicetype=="1"?"13.56":"2.4G"}考勤卡</td>
                <td style={{width: '20%'}}>{this.props.cardid}</td>
                <td style={{width: '15%'}}>{this.props.status=="0"?"未投放":"已投放"}</td>
                <td style={{width: '30%'}}>{this.props.schoolname==null?"无":this.props.schoolname}</td>
            </tr>
        );
    }
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            otherData:this.props.otherData,
            tableData:this.props.tableData,
            schoolDataList:this.props.schoolDataList,
            schoolDataAll:this.props.schoolDataAll,
            importRepeatData:this.props.importRepeatData
        }
    },
    componentDidMount: function () {
        var svar = this;
        var param="param={";
        param = getJsonDataNotEmpty(param,"province",'"'+addressAll.split("-")[0]+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+addressAll.split("-")[1]+'"');
        param = getJsonDataNotEmpty(param,"town",'"'+addressAll.split("-")[2]+'"');
        param = getJsonDataNotEmpty(param,"devicetype",'"'+reserveDeviceType+'"');
        param = getJsonDataNotEmpty(param,"pagenumber","1");
        param = getJsonDataNotEmpty(param,"pagecount",pagecount+'');
        param += "}";
        suixun.ajax(serverUrl+'/deviceInitManage/getDeviceReserves.json',param,"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info.queryresult != null){
                    for(var i=0;i<data.info.queryresult.length;i++){
                        var obj=data.info.queryresult[i];
                        tableData[i] = {keyid:i,schoolname:obj.schoolname,status:obj.status,cardid:obj.cardid,devicetype:obj.devicetype,id:obj.id};
                    }
                    var pageRight = 0;
                    if(data.info.totlepage > 1){
                        pageRight = 1
                    }
                    otherData = {pageLeft:0,pageRight:pageRight};
                    currentpage = 1;totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                    svar.setState({tableData:tableData,otherData:otherData});
                }else{
                    otherData = {pageLeft:0,pageRight:0};
                    currentpage = 1;totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                    svar.setState({tableData:tableData,otherData:otherData});
                }
            }
        });
        $(".remainingValue").html(localStorage.remainingValue);//区域剩余设备数量
        param="param={";
        param = getJsonDataNotEmpty(param,"province",'"'+addressAll.split("-")[0]+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+addressAll.split("-")[1]+'"');
        param = getJsonDataNotEmpty(param,"town",'"'+addressAll.split("-")[2]+'"');
        param += "}";
        suixun.ajax(serverUrl+'/schoolManage/querySchool.json',param,"get",function(data){
            if(data.code == 200 ){
                for(var i=0;i<data.info.length;i++){
                    var obj=data.info[i];
                    schoolDataList[i] = {key:i,id:obj.id,schoolname:obj.schoolname};
                }
                schoolDataAll = schoolDataList;
                svar.setState({schoolDataList:schoolDataList,schoolDataAll:schoolDataAll});
            }else{
                svar.setState({schoolDataList:schoolDataList,schoolDataAll:schoolDataAll});
            }
        });

        //绑定回车时间
        $(document).keypress(function(e) {
            var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
            if (eCode == 13){
                if($(".enterEvent").is(":focus")){
                    svar.onClickQuery();
                }
            }
        });
    },
    /**
     * 查询剩余设备数量
     */
    querySurplus: function () {
        var param="param={";
        param = getJsonDataNotEmpty(param,"province",'"'+addressAll.split("-")[0]+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+addressAll.split("-")[1]+'"');
        param = getJsonDataNotEmpty(param,"town",'"'+addressAll.split("-")[2]+'"');
        param = getJsonDataNotEmpty(param,"devicetype",'"'+reserveDeviceType+'"');
        param = getJsonDataNotEmpty(param,"pagenumber","1");
        param = getJsonDataNotEmpty(param,"pagecount",pagecount+'');
        param += "}";
        suixun.ajax(serverUrl+'/deviceInitManage/getDeviceReserveCount.json',param,"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200 && data.info.queryresult != null){
                var number = data.info.queryresult[0].unputcount;
                if(number == null){
                    number = 0;
                }
                $(".remainingValue").html(number);
                localStorage.remainingValue = number;
            }
        });
    },
    //学校
    onClickGoSchool: function () {
        window.location.href = "../schoolManage/querySchoolList.html";
    },
    //设备投放
    onClickDeviceDelivery: function () {
        window.location.href = "../deviceInitManage/queryDeviceInitList.html";
    },
    //SIM卡投放
    onClickSIMDelivery: function () {
        window.location.href = "../simInfoManage/querySimInfoList.html";
    },
    //设备套餐
    onClickDeviceSetMeal: function () {
        window.location.href = "../packageManage/queryPackageList.html";
    },
    //设备零售价
    onClickDeviceRetailPrice: function () {
        window.location.href = "../devicePriceManage/queryDevicePriceList.html";
    },
    //区域储备量
    onClickDeviceReserve: function () {
        window.location.href = "../deviceonReserve/queryonReserveList.html";
    },
    /**
     * 分页
     * @param num
     */
    onPageClick: function (num) {
    //分页-调用ajac然后把数据查询出来:获取name的值
        //计算currentpage
        suixun.showLoding();//显示加载中
        var onPageLeft = 0,onPageRight = 1,savr = this;
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }else{
            return;
        }
        //修改左右的按钮
        if((currentpage == totlepage && totlepage == 1)|| totlepage == 0){
            onPageLeft = 0;
            onPageRight = 0;
        }else if(currentpage == totlepage && totlepage > 1){
            onPageLeft = 1;
            onPageRight = 0;
        }else if(1 < currentpage && currentpage < totlepage){
            onPageLeft = 1;
            onPageRight = 1;
        }
        var querySchoolName = $("#schoolname_search").attr("data-schooleid"),schoolname = $("#schoolname_search").val(),status = $(".right-election-value").html();
        var param="param={";
        param = getJsonDataNotEmpty(param,"province",'"'+addressAll.split("-")[0]+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+addressAll.split("-")[1]+'"');
        param = getJsonDataNotEmpty(param,"town",'"'+addressAll.split("-")[2]+'"');
        if(status=="未投放"){
            param = getJsonDataNotEmpty(param,"status",'"0"');
        }else if(status=="已投放"){
            param = getJsonDataNotEmpty(param,"status",'"1"');
        }
        param = getJsonDataNotEmpty(param,"devicetype",'"'+reserveDeviceType+'"');
        if($('.school-or-table').html()=='卡号'){
            param = getJsonDataNotEmpty(param,"cardid",'"'+schoolname+'"');
        }else{
            if(querySchoolName != "" && schoolname != ""){
                for(var i = 0 ;i < schoolDataAll.length;i++){
                    if(schoolDataAll[i].schoolname == schoolname){
                        param = getJsonDataNotEmpty(param,"schoolid",'"'+querySchoolName+'"');
                        break;
                    }
                }
            }
        }
        param = getJsonDataNotEmpty(param,"pagenumber",'"'+currentpage+'"');
        param = getJsonDataNotEmpty(param,"pagecount",pagecount+'');
        param += "}";
        suixun.ajax(serverUrl+'/deviceInitManage/getDeviceReserves.json',param,"get",function(data){
            tableData = [];
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info.queryresult != null){
                    for(var i=0;i<data.info.queryresult.length;i++){
                        var obj=data.info.queryresult[i];
                        tableData[i] = {keyid:i,schoolname:obj.schoolname,status:obj.status,cardid:obj.cardid,devicetype:obj.devicetype,id:obj.id};
                    }
                    if(data.info.totlepage > 1 && data.info.totlepage > currentpage){
                        onPageRight = 1
                    }else{
                        onPageRight = 0;
                    }
                    otherData = {pageLeft:onPageLeft,pageRight:onPageRight};
                    totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                    savr.setState({tableData:tableData,otherData:otherData});
                    $(".onlineCheckBox").attr("checked",false);
                    $(".onlineChildCheckBox").attr("checked",false);
                }else{
                    otherData = {pageLeft:0,pageRight:0};
                    totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                    savr.setState({tableData:tableData,otherData:otherData});
                }
            }
        });
    },
    /**
     * 点击 checkbox
     * @returns {XML}
     */
    onlineChildCheckBox: function () {
        if($(".onlineCheckBox").is(":checked")){
            $(".onlineChildCheckBox").prop("checked",true);
        }else{
            $(".onlineChildCheckBox").attr("checked",false);
        }
    },
    /**
     * 点击搜索
     */
    onClickQuery: function () {
        var b = false;
        if($('.school-or-table').html()=='卡号'){
            this.onPageClick(1);
        }else{
            for(var i = 0;i < schoolDataAll.length;i++){
                if(schoolDataAll[i].schoolname == $("#schoolname_search").val()){
                    b = true;
                    break;
                }
            }
            if(b){
                this.onPageClick(1);
            }else{
                suixun.alert("该地区没有此学校！",function (data) {
                    if(data){
                        $("#schoolname_search").val("")
                    }
                });
            }
        }
    },
    /**
     * 验证
     * @param e
     */
    onBlurInput: function (e) {
        var classname = e.target.getAttribute("data-error");
        if($(e.target).val() == ''){
            $("."+classname+"").show();
        }else{
            $("."+classname+"").hide();
        }
    },
    /**
     * 改变弹出层学校输入框
     * @param e
     */
    onChangSchoolInput: function (e) {
        if($('.school-or-table').html()=='卡号' && $(e.target).attr("data-list") == 'schoolname_search'){
            return;
        }
        var val = $(e.target).val();
        if(val != ""){
            this.schoolArray(val,$(e.target).attr("data-list"));
        }else{
            $("."+$(e.target).attr("data-list")+"").hide();
        }
    },
    /**
     * 排序
     * @param val
     * @param cls
     */
    schoolArray: function (val,cls) {
        schoolDataList = [];
        for(var i = 0;i < schoolDataAll.length;i++){
            if((schoolDataAll[i].schoolname).indexOf(val) >= 0){
                schoolDataList.push({schoolname:schoolDataAll[i].schoolname,id:schoolDataAll[i].id});
            }
        }
        if(schoolDataList.length == 0){
            $("."+cls+"").hide();
        }else{
            $("."+cls+"").show();
            this.setState({schoolDataList:schoolDataList});
        }
    },
    /**
     * 点击学校输入框
     * @param e
     */
    onClickSchool: function (e) {
        if($('.school-or-table').html()=='卡号' && $(e.target).attr("data-list") == 'schoolname_search'){
            return;
        }
        var val = $(e.target).val();
        this.schoolArray(val,$(e.target).attr("data-list"));
    },
    /**
     * 点击筛选
     * @returns {XML}
     */
    onClickIsPutIn: function (e) {
        $(".right-election-value").html($(e.target).html());
        this.onPageClick(1);
    },
    /**
     * 点击投放
     */
    onClickPutInDevice: function () {
        var orderList="",num = 0;
        $(".onlineChildCheckBox").each(function(i,box) {
            if(box!=null && box.checked){
                num++;
                orderList += $(box).attr("data-value")+"|";
            }
        });
        if(orderList.length>1){
            orderList = orderList.substring(0,orderList.length-1);
        }else{
            suixun.alert("请先选择要投放的设备！");
            return false;
        }
        $("#deviceNumberList").val(orderList);
        $(".deviceNumber").html(num);
        $("#pop-schoolName").val("");
        $(".popPutDelivery").show();
    },
    /**
     * 点击批量导入
     * @returns {XML}
     */
    onClickImportExport: function () {
        $("#file").val("");
        $("#inputExcelName").val("");
        $(".excelInput").show();
    },
    /**
     * 导入保存的按钮
     */
    excelInput: function () {
        var svar = this;
        var file_name = $(".file_name").val();
        if(file_name != ""){
            suixun.showLoding();//显示加载中
            var formData=new FormData($("#excelInputFrom")[0]);
            var param="param={";
            param = getJsonDataNotEmpty(param,"province",'"'+addressAll.split("-")[0]+'"');
            param = getJsonDataNotEmpty(param,"city",'"'+addressAll.split("-")[1]+'"');
            param = getJsonDataNotEmpty(param,"town",'"'+addressAll.split("-")[2]+'"');
            param += "}";
            suixun.ajax(serverUrl+'/deviceInitManage/addDeviceReserve.json?'+param,formData,"post",function(data){
                suixun.hideLoding(200);//隐藏加载中
                if(data.code == 200 && data.info == null){//成功
                    suixun.alert('导入成功',function (data) {
                        if(data){
                            $(".excelInput ").hide();
                            svar.onClickQueryLastDev();
                            svar.querySurplus();//查询剩余数量
                        }
                    })
                }else if(data.code == 200 && data.info != null){//有重复数据
                    suixun.alert('此次导入有重复数据！',function (data) {
                        if(data){
                            $(".popImportRepeat").show();
                            svar.onPageClick(currentpage);
                            svar.querySurplus();//查询剩余数量
                            $(".excelInput ").hide();
                        }
                    });
                    importRepeatData = data.info;
                    svar.setState({importRepeatData:importRepeatData});
                }else{
                    suixun.alert(data.msg);
                }
            });
        }else{
            suixun.alert("请选择上传文件!");
        }
    },
    /**
     * 选择Excel文件
     */
    onChangFile: function () {
        var fileUrl = $("#file").val().split('\\');//注split可以用字符或字符串分割
        var fileName = fileUrl[fileUrl.length-1];//这就是要取得的图片名称
        var fileLat = fileName.substring( fileName.lastIndexOf('.')+1 );//后缀名称
        if(fileLat == "xls" || fileLat == "xlsx" ){
            $(".file_name").val(fileName);
        }else{
            suixun.alert("请选择Excel文件上传!",function (data) {
                if(data){
                    $(".file_name").val("");
                }
            });
        }
    },
    /**
     * 关闭弹出层
     * @returns {XML}
     */
    onClickHidePop: function () {
        $(".popModel").hide();
        $(".errorMsg ").hide();
    },
    /**
     * 投放-确定
     * @returns {XML}
     */
    putDevice: function () {
        var schoolname = $("#pop-schoolName").val(),schooleid = $("#pop-schoolName").attr("data-schooleid");
        var b = true,svar = this;
        var param="param={";
        if(schoolname == ""){
            suixun.alert("学校名称不能为空！");
            return;
        }else if(schooleid != "" && schoolname != "") {
            for (var i = 0; i < schoolDataAll.length; i++) {
                if (schoolDataAll[i].schoolname == schoolname) {
                    param = getJsonDataNotEmpty(param, "schoolid", '"' + schooleid + '"');
                    b = false;
                    break;
                }
            }
        }
        param = getJsonDataNotEmpty(param,"ids",'"'+$("#deviceNumberList").val()+'"');
        param = getJsonDataNotEmpty(param,"province",'"'+addressAll.split("-")[0]+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+addressAll.split("-")[1]+'"');
        param = getJsonDataNotEmpty(param,"town",'"'+addressAll.split("-")[2]+'"');
        param += "}";
        if(b){
            suixun.alert("没有该学校！");
            return;
        }
        suixun.ajax(serverUrl+'/deviceInitManage/putDeviceReserve.json',param,"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                suixun.alert("投放成功！",function (data) {
                    if(data){
                        $('.onlineCheckBox').attr('checked',false);
                        $('.onlineChildCheckBox').attr('checked',false);
                        $(".popPutDelivery").hide();
                        svar.querySurplus();//查询剩余数量
                        svar.onPageClick(currentpage);//重新查询数据
                    }
                })
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 搜索-获取学校的id
     * @returns {XML}
     * @param e
     */
    onClickQuerySchool: function (e) {
        $("#schoolname_search").attr("data-schooleId",$(e.target).attr("data-id"));
    },
    /**
     * 弹出层-获取学校的id
     * @returns {XML}
     * @param e
     */
    onClickPopSchool: function (e) {
        $("#pop-schoolName").attr("data-schooleId",$(e.target).attr("data-id"));
    },
    /**
     * 导出模版下载
     * @returns {XML}
     */
    excleModel: function () {
        suixun.confirm_noTit("是否导出Excel模版？",function (data) {
            if(data){
                window.location.href = serverUrl+"/deviceInitManage/export_DeviceReserveTemplate.json";
            }
        });
    },
    /**
     * 跳转到导入历史页面
     * @returns {XML}
     */
    onClickQueryLastDev: function () {
        window.location.href = "./queryonReserveHistoryList.html";
    },
    render: function () {
        {
            var svar = this;
            var Tabels = this.state.tableData.map(function (data,index) {
                return (
                    <Table key={index} listNumber={index} id={data.id} devicetype={data.devicetype} cardid={data.cardid} status={data.status} schoolname={data.schoolname} />
                )
            });
            /**
             * 导入重复数据
             */
            var importRepeatDatas = importRepeatData.map(function (data,index) {
                return (
                    <tr style={{height: "36px"}}>
                        <td style={{width: '20%'}}>{parseInt(index)+1}</td>
                        <td style={{width: '80%'}}>{data.cardid}</td>
                    </tr>
                )
            }.bind(this));
        }
        return (
            <div className="outside " >
                <div className="school tableManage-body">
                    <div className="header-menu">
                        <ul>
                            <li onClick={this.onClickGoSchool} >学校</li>
                            <li onClick={this.onClickDeviceDelivery} >设备管理</li>
                            <li onClick={this.onClickSIMDelivery} >SIM卡管理</li>
                            <li onClick={this.onClickDeviceSetMeal} style={{display:"none"}}>设备套餐</li>
                            <li onClick={this.onClickDeviceRetailPrice} style={{display:"none"}}>设备零售价</li>
                            <li onClick={this.onClickDeviceReserve} className="select">区域储备量</li>
                        </ul>
                        <div onClick={this.excleModel} className="excleModel" >
                            <img src="../img/icon/annotations.png" />
                            <span>导出Excel模版下载</span>
                        </div>
                    </div>
                    <div className="pop popPhone popModel popImportRepeat ">
                        <div className="model"></div>
                        <div className="pop-info popModel-info popPhone-info">
                            <div className="pop-title popPhone-title">
                                <span className="pop-title-content popPhone-title-content" style={{fontSize:"18px"}}>
                                    <span className="pop-title-content-solid-left popPhone-title-content-solid-left"/>
                                        批量导入重复数据
                                    <span className="pop-title-content-solid-right popPhone-title-content-solid-right"/>
                                </span>
                                <span className="pop-title-img popPhone-title-img" onClick={this.onClickHidePop}><img src="../img/icon/close.png" alt="关闭"/></span>
                                <input type="hidden" name="batch_id" id="batch_id"/>
                            </div>
                            <div className="pop-body ">
                                <div className="tableInfo importRepeatTableInfo">
                                    <div className="studentsInfo-data tableInfo-data">
                                        <div className="studentsInfo-data-table tableInfo-data-table" >
                                            <table className="head-body ">
                                                <thead>
                                                    <th style={{width: '20%',height: "10px"}}>序号</th>
                                                    <th style={{width: '80%',height: "30px"}}>考勤卡号</th>
                                                </thead>
                                                <tbody >
                                                    {importRepeatData==""?'':importRepeatDatas}
                                                </tbody>
                                            </table>
                                            {importRepeatData==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="messagePrompt" >注：以上为此次导入重复数据，其他数据已导入成功!</div>
                        </div>
                    </div>
                    <div  className="pop popPhone excelInput popModel">
                        <div className="model"></div>
                        <div className="pop-info popModel-info excelInput-info">
                            <div className="pop-title popModel-title ">
                                <span className="pop-title-content popModel-title-content">
                                    <span className="pop-title-content-solid-left popModel-title-content-solid-left" style={{width:"180px "}} />
                                        批量导入
                                    <span className="pop-title-content-solid-right popModel-title-content-solid-right"  style={{width:"180px "}} />
                                </span>
                                <span className="pop-title-img popModel-title-img" onClick={this.onClickHidePop}><img src="../img/icon/close.png" alt="关闭"/></span>
                            </div>
                            <div className="pop-body popModel-body">
                                <div className="popModel-body-input">
                                    <span className="popModel-body-input-title" style={{width: "108px",lineHeight:"41px",backgroundPosition:"106px 0px"}}>选择Excel文件</span>
                                    <form name="excelInputForm" id="excelInputFrom"  enctype="multipart/form-data" method="post">
                                        <input className="file_name input-content export-imei" id="inputExcelName" type="text" name="filename" readOnly="readOnly"/>
                                        <a href="javascript:;" className="file">选择文件
                                            <input type="file" onChange={this.onChangFile}  name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.ms-excel " id="file" />
                                        </a>
                                    </form>
                                </div>
                            </div>
                            <div className="popModel-button" style={{marginTop:"20px"}}>
                                <span className="popModel-button-ok" onClick={this.excelInput}>导入</span>
                            </div>
                        </div>
                    </div>
                    <div  className="pop popPhone popPutDelivery popModel">
                        <div className="model"></div>
                        <div className="pop-info popModel-info popPutDelivery-info">
                            <div className="pop-title popModel-title">
                                <span className="pop-title-content popModel-title-content">
                                    <span className="pop-title-content-solid-left popModel-title-content-solid-left" style={{width:"135px"}} />
                                        投放
                                    <span className="pop-title-content-solid-right popModel-title-content-solid-right" style={{width:"135px"}} />
                                </span>
                                <span className="pop-title-img popModel-title-img" onClick={this.onClickHidePop}><img src="../img/icon/close.png" alt="关闭"/></span>
                                <input type="hidden" name="putdeviceids" id="putdeviceids" />
                            </div>
                            <div className="popModel-body">
                                <input type="hidden" id="deviceNumberList" />
                                <div className="popModel-body-input">
                                    <span className="popModel-body-input-title">学校名称</span>
                                    <span className="popModel-body-input-content">
                                        <input className="input-content school " onBlur={this.onBlurInput} data-schooleId="" onChange={this.onChangSchoolInput} onClick={this.onClickSchool} data-list="pop-schoolName"  id="pop-schoolName" data-error="schoolName-error" maxLength="50" type="text" placeholder="请输入学校名称"/>
                                    </span>
                                    <div className="errorMsg schoolName-error" ></div>
                                    <div className="schoolList pop-schoolName" data-inputId="pop-schoolName" style={{width:"240px"}}>
                                        {
                                            schoolDataList.map(function (data) {
                                                return (
                                                    <span className="schoolList-value" onClick={svar.onClickPopSchool} data-id={data.id}>{data.schoolname}</span>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                                <div className="popModel-body-text">
                                    <span className="popModel-body-text-title">总设备数</span>
                                    <span className="popModel-body-text-content deviceNumber"/>
                                </div>
                            </div>
                            <div className="popModel-button" style={{marginTop:"-25px",bottom: "10px"}}>
                                <span className="popModel-button-ok" onClick={this.putDevice}>确定</span>
                            </div>
                        </div>
                    </div>
                    <header>
                        <div className="header-left">
                            <a href="./queryonReserveList.html" className="back-data">
                                <div className="back-data-comm">
                                    <img src="../img/icon/fanhui.png" alt="" />
                                </div>
                                <div className="back-data-comm">
                                    <span>返回</span>
                                </div>
                            </a>
                            <div className="addressValue">{addressValue}</div>
                            <div className="surplusNumber">剩余储备数量：</div>
                            <div className="remainingValue"></div>
                            <div className="header-right-select droup-select">
                                <div className="school-or-table">学校</div>
                                <span className="lower-right-corner"/>
                                <div className="drop-down" style={{top: '2px'}}>
                                    <span className="select-value school-name" >学校</span>
                                    <span className="select-value student-name" >卡号</span>
                                </div>
                            </div>
                            <div className="header-right-query">
                                <div className="header-right-query-input">
                                    <input className="queryVal enterEvent" type="text" onChange={this.onChangSchoolInput} data-schooleId="" onClick={this.onClickSchool} data-list="schoolname_search"  name="schoolname_search" id="schoolname_search" maxLength="50" placeholder="请输入学校关键词"/>
                                </div>
                                <div className="header-right-query-img" onClick={this.onClickQuery}></div>
                                <div className="schoolList schoolname_search " data-inputId="schoolname_search">
                                    {
                                        schoolDataList.map(function (data) {
                                            return (
                                                <span className="schoolList-value" data-id={data.id} onClick={svar.onClickQuerySchool}>{data.schoolname}</span>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                        <div className="header-right">
                            <div style={{width:'80px',marginRight:'10px'}} className="addButton" onClick={this.onClickQueryLastDev}>最后入库</div>
                            <div className="header-left-select droup-select right-droup-select">
                                <div className="election-value right-election-value">筛选:全部</div>
                                <span className="lower-right-corner" style={{left: "90px"}} />
                                <div className="drop-down right-drop-down" style={{height: "86px"}}>
                                    <span className="select-value" style={{lineHeight:"26px",fontSize:"14px"}} onClick={this.onClickIsPutIn} data-status="99">筛选:全部</span>
                                    <span className="select-value" style={{lineHeight:"26px",fontSize:"14px"}} onClick={this.onClickIsPutIn} data-status="0">未投放</span>
                                    <span className="select-value" style={{lineHeight:"26px",fontSize:"14px"}} onClick={this.onClickIsPutIn} data-status="1">已投放</span>
                                </div>
                            </div>
                            <div style={{marginRight: '22px'}} className="addButton" onClick={this.onClickPutInDevice}>
                                <span className="addButton-img"><img src="../img/icon/delivery.png" /></span>
                                <span className="addButton-text">投放</span>
                            </div>
                            <div style={{width:"100px"}} className="export" onClick={this.onClickImportExport}>
                                <span className="export-img"><img src="../img/icon/import.png" /></span>
                                <span className="export-text">批量导入</span>
                            </div>
                        </div>
                    </header>
                    <div className="parentsInfo tableInfo">
                        <div className="parentsInfo-data tableInfo-data">
                            <div className="parentsInfo-data-table tableInfo-data-table" >
                                <table className="head-body head-body">
                                    <thead>
                                        <th style={{width: '10%'}}><input type="checkbox" className="onlineCheckBox" onClick={this.onlineChildCheckBox}/></th>
                                        <th style={{width: '10%'}}>序号</th>
                                        <th style={{width: '15%'}}>设备类型</th>
                                        <th style={{width: '20%'}}>考勤卡号</th>
                                        <th style={{width: '15%'}}>投放状态</th>
                                        <th style={{width: '30%'}}>激活投放对象</th>
                                    </thead>
                                    <tbody className="reservDetail-tbody">
                                    {this.state.tableData==""?'':Tabels}
                                    </tbody>
                                </table>
                                {this.state.tableData==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                            </div>
                        </div>
                        <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                    </div>
                    <footer id="copyright">
                        <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                    </footer>
                </div>
            </div>
        );
    }
});
ReactDOM.render(
    <Main  otherData={otherData} tableData={tableData} schoolDataList={schoolDataList} schoolDataAll={schoolDataAll} importRepeatData={importRepeatData} />,
    document.getElementById('tableManage')
);
//学校下拉列表
$("*").bind("click",function(e){
    var target = $(e.target);
    if(target.closest(".schoolList-value").length == 1){
        if("schoolname_search" == $(target.parent()).attr("data-inputId")){
            $("#"+$(target.parent()).attr("data-inputId")+"").val(target.html());
        }else{
            $("#"+$(target.parent()).attr("data-inputId")+"").val(target.html());
        }
        $(".schoolName-error").hide();
        $(".schoolList").hide();
    }else{
        $(".schoolList").hide();
    }
});
/**
 * 点击是否投放
 */
$(".right-droup-select").click(function () {
    $('.left-drop-down').slideUp();
    var dropDown = $(this).find('.right-drop-down');
    if(dropDown.is(":hidden")){
        dropDown.slideDown();
    }else{
        dropDown.slideUp();
    }
});
//点击下拉框
$(".header-right-select").click(function () {
    var dropDown = $(this).find('.drop-down');
    if(dropDown.is(":hidden")){
        dropDown.slideDown();
    }else{
        dropDown.slideUp();
    }
});
//选择学校、卡号
$('.drop-down > span').click(function() {
    var value = $(this).html();
    $(".school-or-table").html(value);
    if(value == "学校"){
        $("#schoolname_search").val("");
        $(".queryVal").attr("placeholder","请输入"+$(this).html()+"关键词");
    }else if(value == "卡号" && $(".school-or-table").html() != "设备IMEI号"){
        $("#schoolname_search").val("");
        $(".queryVal").attr("placeholder","请输入"+$(this).html()+"关键字");
    }
    $('.drop-down').slideUp();
});